<template>
  <!-- Element UI 的垂直菜单组件，配置菜单项 -->
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    :default-active="route.path"
    text-color="#fff"
  >
    <!-- 菜单标题 -->
    <h3>后台管理页面</h3>
    <!-- 遍历没有子菜单的菜单项 -->
    <el-menu-item
      v-for="item in noChildrenMenus"
      :index="item.path"
      :key="item.path"
      @click="goToHanlder(item.path)"
    >
      <!-- 动态组件，根据菜单项的图标属性渲染对应的图标 -->
      <component class="icons" :is="item.icon"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>
    <!-- 遍历有子菜单的菜单项 -->
    <el-sub-menu
      v-for="item in hasChildrenMenus"
      :index="item.path"
      :key="item.path"
    >
      <template #title>
        <!-- 动态组件，根据菜单项的图标属性渲染对应的图标 -->
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </template>
      <!-- 子菜单项 -->
      <el-menu-item-group>
        <el-menu-item 
          v-for="subItem in item.children"
          :index="subItem.path"
          :key="subItem.path"
          @click="() => router.push(subItem.path)"
        >
          <!-- 动态组件，根据子菜单项的图标属性渲染对应的图标 -->
          <component class="icons" :is="subItem.icon"></component>
          <span>{{ subItem.label }}</span>
          
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>














<script setup>
  // 导入 Vue Router 的钩子
  import { useRouter } from 'vue-router'
  import { ref, computed } from 'vue'
  import { useRoute } from 'vue-router'
  
  import { useUserStore } from '@/stores/counter'


  const userStore = useUserStore()
  // 创建路由器实例
  const router = useRouter()
  // 获取当前路由信息
  const route = useRoute()


  const userInfo = userStore.getUserInfo()

  // 定义菜单数据
  const menus = ref([
    {
      path: '/index', 
      label: '首页' ,
      name: 'home' ,
      icon:'house' ,
      role: ['admin','student','teacher']
    },
    {
      path: '/user', 
      name: 'user' ,
      label: '用户管理' ,
      icon:'user' ,
      role: ['admin','teacher']
    },
    {
      path: '/book', 
      name: 'book' ,
      label: '图书管理' ,
      icon:'notebook' ,
      role: ['admin','teacher']
    },
    {
      path: '/borrowing', 
      name: 'borrowing' ,
      label: '借阅管理' ,
      icon:'Connection' ,
      role: ['admin','student']
    },
    {
      path: '/other',
      label: '系统页面',
      icon:'setting',
      role: ['admin'],
      children:[
        {
          path: '/other/page1',
          name:'page1' ,
          label:'页面一' ,
          icon:'setting',
          url:'PageOne'
        },
        {
          path: '/other/page2',
          name:'page2' ,
          label:'页面二' ,
          icon:'setting',
          url:'PageTwo'
        }
      ]
    }
  ])

  // 定义跳转函数
  const goToHanlder = (path) => {
    return router.push(path)
  }



// 计算属性用于过滤出没有子菜单的菜单项
// 过滤条件是菜单项没有子菜单并且菜单项的角色权限包含用户角色
const noChildrenMenus = computed(() => 
          menus.value.filter(item => !item.children && item.role.includes(userInfo.role)) )

// 计算属性用于过滤出有子菜单的菜单项
// 过滤条件是菜单项有子菜单并且菜单项的角色权限包含用户角色

const hasChildrenMenus = computed(() =>
 menus.value.filter(item => item.children && item.role.includes(userInfo.role)))

</script>



<style scoped>
  /* 图标样式 */
  .icons{
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  /* 菜单样式 */
  .el-menu{
    border-right: none;
    height: 800px;
    width: 180px;
  }  
  /* 菜单标题样式 */
  h3{
    text-align: center;
    color: white;
  }
</style>